<template>
  <div class="test_wrapper" @dragover="dragover($event)">
    <transition-group name="sort">
      <el-row
        v-for="(item, index) in emptyArray"
        :key="index"
        class="sort-item"
        :class="'sort-item-'+index"
        :draggable="true"
        @dragstart="dragstart(tableData[index])"
        @dragenter="dragenter(tableData[index], $event)"
        @dragend="dragend(tableData[index], $event)"
        @dragover="dragover($event)"
      >
        <el-col  class="sort-item-name">
          <span>
            {{ tableData[index] }}
          </span>
        </el-col>
      </el-row>
    </transition-group>
  </div>
</template>

<script setup>
import { emptyArray } from '../../public/dataList.js'
import { reactive, defineProps, watch, watchEffect } from 'vue';

const props = defineProps({
  tableData: {
    type: Array,
    default:()=>{
      []
    }
  },
  resourceName: {
    type: String
  }
});

// const emits = defineEmits(['done']);
const state = reactive({
  oldData: emptyArray, // 开始排序时按住的旧数据
  newData: [], // 拖拽过程的数据 // 列表数据
  tableData: props.tableData,
  resourceName: '',
  emptyArray:emptyArray,
});

console.log(state.tableData)

const dragstart = (value) => {
  console.log(value);
  console.log(state.oldData);
  state.oldData = value;
};

// 记录移动过程中信息
const dragenter = (value, e) => {
  state.newData = value;
  e.preventDefault();
};

// 拖拽最终操作
const dragend = async () => {
  if (state.oldData !== state.newData) {
    const oldIndex = state.tableData.indexOf(state.oldData);
    const newIndex = state.tableData.indexOf(state.newData);
    const newItems = [...state.tableData];
    // 删除老的节点
    newItems.splice(oldIndex, 1);
    // 在列表中目标位置增加新的节点
    newItems.splice(newIndex, 0, state.oldData);
    state.tableData = [...newItems];
    // emits('done', state.tableData);
  }
};

// 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
const dragover = (e) => {
  e.preventDefault();
};

// 获取分组数据
// const getGroupData = (tableData) => {
//   nextTick(() => {
//     state.tableData = [{resourceId: 1, contentName: 'nad'}]
//   })
// };

watch(
  () => props.tableData,
  (val) => {
    state.tableData = [...val];
    console.log(state.tableData)
  },
  {
    deep: true
  }
);


// watchEffect(() => {
//   state.tableData = props.tableData;
//   console.log(state.tableData)
// });

watchEffect((onInvalidate) => {
  // 异步api调用，返回一个操作对象
  onInvalidate(() => {
    // 取消异步api的调用。
    // apiCall && apiCall.cancel();
  });
});

// defineExpose({getGroupData})
</script>

<style scoped lang="less" >
.sort-move {
  transition: transform 0.3s;
}
.test_wrapper {
  width: 100%;
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .sort-item {
    width: 65px !important;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #000;
    padding: 0px 2px;
    box-sizing: border-box;
    margin: 0;
    background-color: #fff;
    border: 1px solid;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &-name {
      .el-input {
        width: 90%;
      }
      /deep/.el-input__inner {
        padding-left: 0;
      }
      .noneBorder {
        /deep/ .el-input__inner {
          border: none;
        }
      }
    }
  }
  .sort-item:nth-of-type(21n-17),.sort-item:nth-of-type(21n-4){
    margin-right: 40px;
  }
  .sort-item:nth-of-type(232){
    margin-left: 300px;
  }
  .sort-item:nth-of-type(235){
    margin-right: 0px;
  }
  .sort-item:hover {
    background-color: #dfdfdf;
  }
}
</style>